<script setup>

import {selectPage, saveRule, updateRule, delRule} from '@/api/system/apartment/rule'
import {getEList} from '@/api/system/apartment/weequipment'


export default {
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        ruleEnergyMeter: "",
        pageNum: 1,
        pageSize: 3
      },
      ETypeList: [],
      total: 1,
      title: "",
      tableData: [{
        id: "1",
      }],
      ruleForm: {},
      rules: {
        aPower: [
          {required: true, message: '请输入A路功率', trigger: 'blur'},
        ],
        ruleEnergyMeter: [
          {required: true, message: '请选择电表', trigger: 'blur'},
        ]
      }
    }
  }, methods: {
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 3
      };
      this.resetForm("queryParams");
      this.queryMethods();
    },
    queryMethods() {
      let that = this;
      that.queryParams.pageNum = 1;
      that.queryParams.pageSize = 3;

      selectPage(that.queryParams).then(res => {
        that.tableData = res.data.records;
        that.queryParams.pageNum = res.data.pageNum;
        that.queryParams.pageSize = res.data.pageSize;
        that.total = res.data.total;
      })
    },
    addRuleShow() {
      this.title = "添加电表规则"
      this.dialogVisible = true;
    },
    submitForm(formName) {
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title == "添加电表规则") {
            saveRule(that.ruleForm).then(res => {
              if (res.code == 200) {
                that.$message({
                  message: '添加成功',
                  type: 'success'
                });
                that.dialogVisible = false;
                that.queryMethods();
              } else {
                that.$message({
                  message: "添加失败",
                  type: 'error'
                });
              }
            })
          } else {
            updateRule(that.ruleForm).then(res => {
              if (res.code == 200) {
                that.$message({
                  message: '修改成功',
                  type: 'success'
                });
                that.dialogVisible = false;
                that.queryMethods();
              } else {
                that.$message({
                  message: "修改失败",
                  type: 'error'
                });
              }
            })
          }

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize;
      this.queryMethods();
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum;
      this.queryMethods();
    },
    upRuleShow(row) {
      this.title = "修改电表信息"
      this.ruleForm = row;
      this.dialogVisible = true;
    },
    delRule(id) {
      let that = this;
      delRule(id).then(res => {
        if (res.code == 200) {
          that.$message({
            message: '删除成功',
            type: 'success'
          });
          that.queryMethods();
        } else {
          that.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    }

  },
  created() {
    let that = this;
    that.queryMethods();
    getEList().then(function (data) {
      that.ETypeList = data.data;
    })
  }
}
</script>

<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true">
      <el-select style="width: 190px;" v-model="queryParams.ruleEnergyMeter"
                 placeholder="请选择设备类型">
        <el-option
          v-for="o in ETypeList"
          :key="o.equipmentName"
          :value="o.equipmentName"
          :label="o.equipmentName"
        ></el-option>
      </el-select>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryMethods()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-top:30px;margin-bottom: 30px" icon="el-icon-plus"
               @click="addRuleShow">新增电表规则
    </el-button>

    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="id"
        label="序号"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="ruleEnergyMeter"
        label="电表名称"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="id"
        label="电表总功率"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column label="A路规则" align="center">
        <el-table-column
          prop="apower"
          align="center"
          label="电表A路功率"
          width="120">
        </el-table-column>
        <el-table-column
          prop="atimeOne"
          label="A路时段1"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="atimeOneOperation"
          align="center"
          label="A路时段1操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.atimeOneOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="atimeTwe"
          label="A路时段2"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="atimeTweOperation"
          align="center"
          label="A路时段2操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.atimeTweOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="atimeThree"
          label="A路时段3"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="atimeThreeOperation"
          align="center"
          label="A路时段3操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.atimeThreeOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="atimeFour"
          label="A路时段4"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="atimeFourOperation"
          align="center"
          label="A路时段4操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.atimeFourOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="B路规则" align="center">
        <el-table-column
          prop="province"
          align="center"
          label="电表B路功率"
          width="120">
        </el-table-column>
        <el-table-column
          prop="btimeOne"
          label="B路时段1"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="btimeOneOperation"
          align="center"
          label="B路时段1操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.btimeOneOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="btimeTwe"
          label="B路时段2"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="btimeTweOperation"
          align="center"
          label="B路时段2操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.btimeTweOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="btimeThree"
          label="B路时段3"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="btimeThreeOperation"
          align="center"
          label="B路时段3操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.btimeThreeOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="btimeFour"
          label="B路时段4"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="btimeFourOperation"
          align="center"
          label="B路时段4操作"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.btimeFourOperation==1">开阀</el-tag>
            <el-tag v-else>关阀</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="upRuleShow(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delRule(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryParams.pageNum"
        :page-size="this.queryParams.pageSize"
        :page-sizes="[1,2,3]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="72%">
      <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"
               class="demo-ruleForm">
        <el-row :gutter="200">
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item label="规则电表" prop="ruleEnergyMeter">
                <el-select style="width: 190px;" v-model="ruleForm.ruleEnergyMeter"
                           placeholder="请选择设备类型">
                  <el-option
                    v-for="o in ETypeList"
                    :key="o.equipmentName"
                    :value="o.equipmentName"
                    :label="o.equipmentName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="grid-content bg-purple">
              <el-form-item label="A路功率" prop="apower">
                <el-input style="width: 400px" placeholder="请输入内容" v-model="ruleForm.apower">
                  <template slot="append">W</template>
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <p>B路用来连接空调和常用照明，无需设置功率</p>

        <el-divider content-position="left">A路规则</el-divider>
        <el-row :gutter="5">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="A路时段1" prop="atimeOne">
                <el-time-select
                  v-model="ruleForm.atimeOne"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段1操作" prop="atimeOneOperation">
                <el-select style="width: 160px;" v-model="ruleForm.atimeOneOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="A路时段2" prop="atimeTwe">
                <el-time-select
                  v-model="ruleForm.atimeTwe"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段2操作" prop="atimeTweOperation">
                <el-select style="width: 160px;" v-model="ruleForm.atimeTweOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="A路时段3" prop="atimeThree">
                <el-time-select
                  v-model="ruleForm.atimeThree"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段3操作" prop="atimeThreeOperation">
                <el-select style="width: 160px;" v-model="ruleForm.atimeThreeOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="A路时段4" prop="atimeFour">
                <el-time-select
                  v-model="ruleForm.atimeFour"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段4操作" prop="atimeFourOperation">
                <el-select style="width: 160px;" v-model="ruleForm.atimeFourOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-divider content-position="left">B路规则</el-divider>
        <el-row :gutter="5">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="B路时段1" prop="btimeOne">
                <el-time-select
                  v-model="ruleForm.btimeOne"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段2操作" prop="btimeOneOperation">
                <el-select style="width: 160px;" v-model="ruleForm.btimeOneOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="B路时段2" prop="btimeTwe">
                <el-time-select
                  v-model="ruleForm.btimeTwe"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段2操作" prop="btimeTweOperation">
                <el-select style="width: 160px;" v-model="ruleForm.btimeTweOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="B路时段3" prop="btimeThree">
                <el-time-select
                  v-model="ruleForm.btimeThree"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段3操作" prop="btimeThreeOperation">
                <el-select style="width: 160px;" v-model="ruleForm.btimeThreeOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="B路时段4" prop="btimeFour">
                <el-time-select
                  v-model="ruleForm.btimeFour"
                  style="width: 163px"
                  :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="时段4操作" prop="btimeFourOperation">
                <el-select style="width: 160px;" v-model="ruleForm.btimeFourOperation"
                           placeholder="请选择设备类型">
                  <el-option :value="1" label='开阀'/>
                  <el-option :value="2" label="关阀"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="warning" @click="submitForm('ruleForm')">提交并下发</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.el-divider {
  background-color: #409eff;
}

.el-divider__text.is-left {
  color: #409eff;
  left: 0;
  font-weight: bold;
  margin: 0 10px;
  padding: 0 5px;
}

</style>
